<template>
  <div 
    class="site-card" 
    :class="{ 
      'is-featured': site.featured,
      'is-domestic': site.region === 'domestic'
    }"
    @click="handleCardClick"
  >
    <!-- 卡片背景装饰 -->
    <div class="card-bg-decoration"></div>
    
    <!-- 网站图标 -->
    <div class="site-icon-container">
      <div class="site-icon">
        <img 
          v-if="iconUrl" 
          :src="iconUrl" 
          :alt="site.name"
          @error="handleIconError"
          loading="lazy"
        />
        <span v-else class="icon-fallback">{{ getIconFallback() }}</span>
      </div>
      <div v-if="site.featured" class="featured-badge" title="精选网站">⭐</div>
    </div>

    <!-- 网站信息 -->
    <div class="site-info">
      <div class="site-header">
        <h3 class="site-name">{{ site.name }}</h3>
        <div class="site-meta">
          <span class="site-type" :title="getTypeLabel(site.type)">
            {{ getTypeIcon(site.type) }}
          </span>
          <span class="site-region" :title="getRegionLabel(site.region)">
            {{ getRegionIcon(site.region) }}
          </span>
        </div>
      </div>

      <div class="site-url" v-if="site.url">
        <a 
          :href="site.url" 
          target="_blank" 
          rel="noopener noreferrer"
          @click.stop
          class="url-link"
        >
          {{ formatUrl(site.url) }}
          <span class="external-icon">↗</span>
        </a>
      </div>

      <p class="site-description">{{ site.description }}</p>

      <div class="site-tags">
        <span class="site-category">{{ site.category }}</span>
        <span v-if="site.tags" class="site-tag-list">
          <span 
            v-for="tag in site.tags" 
            :key="tag"
            class="site-tag"
          >
            {{ tag }}
          </span>
        </span>
      </div>
    </div>

    <!-- 倒闭信息 -->
    <div class="closure-info">
      <div class="closure-date">
        <span class="closure-icon">⚰️</span>
        <span class="closure-text">
          {{ formatDate(site.closureDate) }}
        </span>
      </div>
      <div class="closure-year">{{ site.year }}年</div>
    </div>

    <!-- 悼念按钮 -->
    <div class="card-actions">
      <button 
        class="mourn-button"
        @click.stop="handleMourn"
        :class="{ 'is-mourned': isMourned }"
        :title="isMourned ? '已悼念' : '点击悼念'"
      >
        <span class="mourn-icon">🕯️</span>
        <span class="mourn-text">{{ isMourned ? '已悼念' : '悼念' }}</span>
        <span class="mourn-count" v-if="mournCount > 0">{{ mournCount }}</span>
      </button>
      
      <button 
        class="share-button"
        @click.stop="handleShare"
        title="分享"
      >
        <span class="share-icon">📤</span>
      </button>
    </div>

    <!-- 卡片光效 -->
    <div class="card-glow"></div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import iconMap from '@/assets/data/iconMap.json'
import { getTypeIcon, getTypeLabel, getRegionIcon, getRegionLabel, formatDate } from '@/utils/helpers'

const props = defineProps({
  site: {
    type: Object,
    required: true
  },
  featured: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click', 'mourn', 'share'])

const iconError = ref(false)
const isMourned = ref(false)
const mournCount = ref(0)

// 计算属性
const iconUrl = computed(() => {
  if (iconError.value) return null
  return iconMap[props.site.name] || null
})

// 方法
const getIconFallback = () => {
  const name = props.site.name
  if (name) {
    // 尝试获取中文首字符，否则获取英文首字符
    const firstChar = name.charAt(0)
    return /[\u4e00-\u9fff]/.test(firstChar) ? firstChar : firstChar.toUpperCase()
  }
  return '🌐'
}

const handleIconError = () => {
  iconError.value = true
}

const formatUrl = (url) => {
  try {
    const urlObj = new URL(url)
    return urlObj.hostname.replace('www.', '')
  } catch {
    return url
  }
}

const handleCardClick = () => {
  emit('click', props.site)
}

const handleMourn = () => {
  if (!isMourned.value) {
    isMourned.value = true
    mournCount.value += 1
    
    // 添加悼念动画效果
    const button = event.target.closest('.mourn-button')
    button.classList.add('mourning-animation')
    
    setTimeout(() => {
      button.classList.remove('mourning-animation')
    }, 1000)
  }
  
  emit('mourn', props.site)
}

const handleShare = async () => {
  const shareData = {
    title: `${props.site.name} - 数字墓园`,
    text: `${props.site.name}: ${props.site.description}`,
    url: window.location.href
  }

  try {
    if (navigator.share) {
      await navigator.share(shareData)
    } else {
      // 降级到复制链接
      await navigator.clipboard.writeText(shareData.url)
      // 这里可以显示一个提示
      console.log('链接已复制到剪贴板')
    }
  } catch (error) {
    console.error('分享失败:', error)
  }
  
  emit('share', props.site)
}

// 初始化悼念数据
onMounted(() => {
  // 从localStorage获取悼念状态
  const mournedSites = JSON.parse(localStorage.getItem('mournedSites') || '{}')
  isMourned.value = !!mournedSites[props.site.name]
  
  // 模拟悼念数量（实际项目中应该从服务器获取）
  mournCount.value = Math.floor(Math.random() * 100) + 1
})
</script>

<style scoped>
.site-card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(15px);
  overflow: hidden;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.site-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.site-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 140, 0, 0.6);
  transform: translateY(-6px) scale(1.02);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 8px 25px rgba(255, 140, 0, 0.2),
    0 2px 8px rgba(255, 140, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.site-card:hover::before {
  opacity: 1;
}

.site-card.is-featured {
  border-color: var(--accent-color);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}

.site-card.is-domestic {
  border-left: 4px solid var(--secondary-color);
}

/* 背景装饰 */
.card-bg-decoration {
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 20%, rgba(255, 140, 0, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
  pointer-events: none;
  animation: backgroundShimmer 8s ease-in-out infinite;
}

/* 网站图标 */
.site-icon-container {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.site-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--border-color);
}

.site-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.icon-fallback {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-primary);
}

.featured-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 1.2rem;
  animation: twinkle 2s infinite;
}

/* 网站信息 */
.site-info {
  margin-bottom: 1rem;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.site-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
  flex: 1;
}

.site-meta {
  display: flex;
  gap: 0.5rem;
  margin-left: 0.5rem;
}

.site-type,
.site-region {
  font-size: 1rem;
  opacity: 0.8;
}

.site-url {
  margin-bottom: 0.75rem;
}

.url-link {
  color: var(--accent-color);
  text-decoration: none;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.2s ease;
}

.url-link:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}

.external-icon {
  font-size: 0.8rem;
  opacity: 0.7;
}

.site-description {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 1rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.site-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.site-category {
  background: var(--accent-color);
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0.6rem;
  border-radius: 12px;
}

.site-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.site-tag {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

/* 倒闭信息 */
.closure-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1rem;
}

.closure-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.closure-icon {
  font-size: 1rem;
}

.closure-year {
  color: var(--accent-color);
  font-weight: 600;
  font-size: 1.1rem;
}

/* 卡片操作 */
.card-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.mourn-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mourn-button:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--accent-color);
  color: var(--text-primary);
}

.mourn-button.is-mourned {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
}

.mourn-button.mourning-animation {
  animation: mourning 1s ease-out;
}

.mourn-icon {
  font-size: 1rem;
}

.mourn-count {
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.2rem 0.4rem;
  border-radius: 8px;
  min-width: 20px;
  text-align: center;
}

.share-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.6rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-button:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--accent-color);
  color: var(--text-primary);
}

.share-icon {
  font-size: 1rem;
}

/* 卡片光效 */
.card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
      rgba(255, 140, 0, 0.15) 0%, 
      rgba(255, 255, 255, 0.05) 30%,
      transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.site-card:hover .card-glow {
  opacity: 1;
  animation: candleGlow 2s ease-in-out infinite alternate;
}

/* 动画 */
@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.2) rotate(180deg); }
}

@keyframes mourning {
  0% { transform: scale(1); }
  25% { transform: scale(1.1); }
  50% { transform: scale(1.05); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes backgroundShimmer {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.6;
  }
  25% {
    transform: translate(5px, -5px) rotate(90deg);
    opacity: 0.8;
  }
  50% {
    transform: translate(-3px, 3px) rotate(180deg);
    opacity: 0.4;
  }
  75% {
    transform: translate(-5px, -3px) rotate(270deg);
    opacity: 0.7;
  }
}

@keyframes candleGlow {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .site-card {
    padding: 1rem;
  }
  
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .site-meta {
    margin-left: 0;
  }
  
  .site-name {
    font-size: 1.1rem;
  }
  
  .closure-info {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  
  .card-actions {
    flex-direction: column;
  }
  
  .mourn-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .site-icon {
    width: 40px;
    height: 40px;
  }
  
  .icon-fallback {
    font-size: 1.2rem;
  }
  
  .site-description {
    -webkit-line-clamp: 2;
  }
  
  .site-tags {
    gap: 0.25rem;
  }
  
  .site-tag {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
  }
}
</style>